<template>
  <div class="Comprehensivealarmpage_box">
    <div class="page_box">
      <div class="tabs">
        <p
          v-for="(item, index) in tabs"
          :key="index"
          @click="handletabs(index)"
          :style="{
            background:
              activeitem == index ? 'url(' + img1 + ')' : 'url(' + img2 + ')',
          }"
        >
          {{ item }}
        </p>
      </div>
      <div class="page_content">
        <div class="leftbox">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="所有报警" name="1">
              <template slot="title">
                <p style="display: flex; align-items: center">
                  <img
                    src="@/assets/images/alarm.png"
                    style="width: 16px; height: 16px; margin-right: 10px"
                  />
                  <span>所有报警</span>
                </p>
              </template>
              <p
                class="leftside"
                v-for="(item, index) in menus"
                :key="index"
                :class="activenumber == index ? 'activebg' : ''"
                @click="handelitem(index,item)"
              >
                <img src="@/assets/images/alarmicon.png" />
                <span>{{ item.instanceDisplayName }}</span>
              </p>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div style="height: 100%; flex: 1">
          <p class="tabletitle">火气系统</p>
          <div class="tablebox">
            <div style="height: calc(100% - 100px)">
              <el-table
                :data="tableData"
                v-loading="loading"
                stripe
                height="100%"
                class="mytable"
                 header-fixed
                :row-class-name="tableRowClassName"
                >
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column
                label="报警名称"
                width="300"
                prop="attributeDisplayName"
                align="center"
                class="custom-height"
              ></el-table-column>
              <el-table-column
                label="所属设备"
                prop="instanceName"
                align="center"
                class="custom-height"
              ></el-table-column>
              <el-table-column
                label="报警源"
                prop="instanceDisplayName"
                align="center"
                class="custom-height"
              ></el-table-column>
              <!-- <el-table-column
                label="所属系统"
                prop="sys"
                align="center"
                class="custom-height"
              ></el-table-column> -->
              <el-table-column
                label="报警等级"
                prop="level"
                align="center"
                class="custom-height"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.priority == 'Ⅰ'"
                    style="color: rgba(255, 69, 45, 1)"
                    >{{scope.row.priority}}级</span
                  >
                  <span
                    v-if="scope.row.priority == 'Ⅱ'"
                    style="color: rgba(255, 209, 92, 1)"
                    >{{scope.row.priority}}级</span
                  >
                  <span
                    v-if="scope.row.priority == 'Ⅲ'"
                    style="color: rgba(7, 210, 250, 1)"
                    >{{scope.row.priority}}级</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="报警状态"
                align="center"
                class="custom-height"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.ackStatus == '已处理'"
                    style="color: rgba(44, 201, 112, 1)"
                    >{{scope.row.ackStatus}}</span
                  >
                  <span v-else style="color: rgba(255, 69, 45, 1)">{{scope.row.ackStatus}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="报警时间"
                align="center"
                prop="disappearedDatetime"
                class="custom-height"
              ></el-table-column>
              <el-table-column
                label="消除时间"
                align="center"
                prop="ackDatetime"
                class="custom-height"
              ></el-table-column>
            </el-table>
            </div>
           
            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-show="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum"
                :page-size.sync="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getHistoryWarningType,getHistoryWarningList} from "@/api/visual/comprehensivealarm.js"
export default {
  data() {
    return {
      activenumber: 0,
      // 遮罩层
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总条目数
      menus: [],
      img1: require("@/assets/images/bg_active.png"),
      img2: require("@/assets/images/bg_normal.png"),
      activeNames: ["1"],
      activeitem: 0,
      tabs: ["实时警报", "历史警报"],
      tableData: [],
    };
  },
  mounted() {
    // 默认加载实时警报数据
    this.loading = false
  },
  methods: {
    handelitem(index,row) {
      this.activenumber = index;
      this.queryParams.instanceDisplayName = row.instanceDisplayName;
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getData();
    },
    async handletabs(index) {
      this.activeitem = index;
      if(index == 0) {
        // 实时警报
        this.loading = false;
        this.menus = [];
        this.tableData = [];
        this.total = 0;
      }
      if(index == 1) {
        // 历史警报
        this.getMenusData()
      }
    },
    // 获取菜单数据
    getMenusData(){
      getHistoryWarningType().then(res=>{
        this.menus = res.data;
      })
      .then(()=>{
        this.queryParams.instanceDisplayName = this.menus[0].instanceDisplayName
        this.getData()
      })
    },
    // 获取表格数据
    getData() {
      this.loading = true;
      getHistoryWarningList(this.queryParams).then(res=>{
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      })
    },
    handleChange() {},
    tableRowClassName({ row, rowIndex }) {
      // 通过rowIndex判断行号的奇偶性
      if (rowIndex % 2 === 0) {
        return "even-row";
      } else {
        return "odd-row";
      }
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getData()
    }
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/pagenation.scss";
.Comprehensivealarmpage_box {
  width: calc(100% - 40px);
  // padding-top: 51px;
  height: calc(100% - 51px);
  margin-left: 20px;
  .page_box {
    height: 100%;
    background: url("~@/assets/images/content_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .tabs {
    display: flex;
    align-items: center;
    margin-left: 30px;
    padding-top: 24px;
    margin-bottom: 16px;
    p {
      cursor: pointer;
      background-repeat: no-repeat !important;
      background-size: 100% 100% !important;
      text-align: center;
      height: 43px;
      line-height: 43px;
      padding: 0 17px;
      color: white;
      margin-right: 13px;
    }
  }
  .page_content {
    margin-left: 30px;
    margin-right: 30px;
    padding: 0;
    height: calc(100% - 108px);
    display: flex;
    justify-content: space-between;
    .leftbox {
      margin-right: 20px;
    }
    .leftside {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-left: 17px;
      margin-bottom: 10px;
      height: 32px;
      line-height: 32px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
    }
  }
}
.activebg {
  background: rgba(0, 169, 255, 1);
}
::v-deep .el-collapse {
  border: none !important;
  width: 300px !important;
  border: 2px solid rgba(31, 198, 255, 0.1) !important;
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(
    180deg,
    rgba(2, 68, 102, 0.3) 0%,
    rgba(2, 60, 89, 0.3) 0%,
    #01121b 100%
  );
}
::v-deep .el-collapse-item__header {
  border: none !important;
  color: white !important;
  padding-left: 17px;
  background-color: rgba(
    2,
    60,
    89,
    0
  ) !important; /* 使用!important确保样式覆盖 */
}
::v-deep .el-collapse-item__content {
  color: white !important;
}
::v-deep .el-collapse-item__wrap {
  border: none !important;
  color: white;
  background-color: rgba(
    2,
    60,
    89,
    0
  ) !important; /* 使用!important确保样式覆盖 */
}
.tabletitle {
  margin-top: 0;
  font-size: 24px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 28px;
  margin-bottom: 25px;
  padding: 0;
}
.tablebox {
  border: 2px solid rgba(31, 198, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(2, 68, 102, 0.3) 0%,
    rgba(2, 60, 89, 0.3) 0%,
    #01121b 100%
  );
  height: calc(100% - 53px);
}
</style>